<template>
  <!-- 菜单管理   expand-row-keys 默认展示-->
  <el-card class="box-card">
    <el-table
      :data="permissionList"
      style="width: 100%"
      row-key="id"
      border
      :expand-row-keys="expandList"
    >
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="code" label="权限值" width="180">
      </el-table-column>
      <el-table-column prop="tocode" label="跳转权限值"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-tooltip
            class="item"
            effect="dark"
            :content="addTitleName(row)"
            placement="top-start"
          >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="addMenu(row)"
              :disabled="row.level == 4"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="endTitleName(row)"
            placement="top-start"
          >
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit"
              @click="handleEdit(row, $index)"
              :disabled="row.level == 1"
            ></el-button>
          </el-tooltip>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(row, $index)"
            :disabled="row.level == 1"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="titleName" :visible.sync="dialogFormVisible">
      <el-form :model="permission" :rules="permissionRules" ref="permission">
        <el-form-item label="名称" label-width="120px" prop="name">
          <el-input v-model="permission.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值" label-width="120px" prop="code">
          <el-input v-model="permission.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="跳转功能权限值"
          label-width="120px"
          v-if="permission.level == 4"
        >
          <el-input v-model="permission.toCode" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCancel">取 消</el-button>
        <el-button type="primary" @click="addMenuConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import request from "@/api/acl/permission";
const menuRules = {
  name:[{required:true,message:'名称必须输入'}],
  code:[{required:true,message:'权限值必须输入'}]
}

const btnRules = {
  name:[{required:true,message:'名称必须输入'}],
  code:[{required:true,message:'权限值必须输入'}]
}
export default {
  name: "Permission",
  data() {
    return {
      // 全部数据
      permissionList: [],
      // 默认展示行
      expandList: [],
      // 弹出框
      dialogFormVisible: false,
      permission: {
        // 要操作的菜单权限对象
        level: 0,
        name: "",
        code: "",
        toCode: "",
        type: "",
      },
    };
  },
  methods: {
    endTitleName(row){
      if (row.level == 1 || row.level == 2) {
        return "修改菜单";
      } else {
        return "修改功能";
      }
    },
    // 鼠标移动到菜单名
    addTitleName(row,index) {
      if (row.level == 1 || row.level == 2) {
        return "添加菜单";
      } else {
        return "添加功能";
      }
    },
    // 编辑
    handleEdit(row) {
      this.dialogFormVisible = true;
      this.permission = row;
      console.log(row);
    },
    // 删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await request.removePermission(row.id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.menuAdmini();
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 初始化
    async menuAdmini() {
      try {
        let result = await request.getPermissionList();
        console.log(result.data.children);
        this.permissionList = result.data.children;
        // 默认展示
        this.expandList = [this.permissionList[0].id];
      } catch (error) {
        this.$message.error("初始化菜单失败");
      }
    },
    // 新增
    async addMenu(row) {
      this.dialogFormVisible = true;
      // this.permission = {...row}
      this.permission.level = row.level + 1;
      this.permission.type = row.level == 4 ? 2 : 1;
      this.permission.pid = row.id;
    },
    // 新增确认
    addMenuConfirm() {
      this.$refs.permission.validate(async(vaild)=>{
        if(vaild){

          try {
            if (this.permission.id) {
              await request.updatePermission(this.permission);
            } else {
              await request.addPermission(this.permission);
              // this.$message.success("新增成功");
            }
            this.dialogFormVisible = false;
            this.permission = {};
            this.menuAdmini();
          } catch (error) {
            this.$message.error(error);
          }
        }
      })
    },
    // 新增取消
    addCancel() {
      // this.$refs['permission'].resetField()
      this.permission = {};
      this.dialogFormVisible = false;
    },
  },
  computed: {
    titleName() {
      const { id, level } = this.permission;

      if (id) {
        return level == 4 ? "修改功能" : "修改菜单";
      } else {
        return level == 4 ? "添加功能" : "添加菜单";
      }
    },
    permissionRules () {
      return this.permission.level===4 ? btnRules : menuRules
    }
  },
  mounted() {
    this.menuAdmini();
  },
};
</script>

<style></style>
